<template>
  <div>
    <div class="orderList">
      <div class="topNav">
        <header class="mint-header">
          <div class="mint-header-button is-left">
            <button class="mint-button mint-button--default mint-button--normal">
              <span class="mint-button-icon">
                <i class="mintui mintui-back" @click="$router.go(-1)"></i>
              </span>
            </button>
          </div>
          <h1 class="mint-header-title">我的订单</h1>
          <div class="mint-header-button is-right">
            <button class="mint-button mint-button--default mint-button--normal">
              <label class="mint-button-text">
                <i class="mint-toast-icon mintui mintui-search"></i>
              </label>
            </button>
          </div>
        </header>
        <div class="orderStatus">
          <div class="tab" ref="tab">
            <ul class="tab_content" ref="tabcontent">
              <li class="tab_item" v-for="(item,index) in TabList" ref="tabitem" :key="index" @click="checkStatus(index)" :class="{'check':index == checkClr}">
                {{item.sortname}}
              </li>
            </ul>
          </div>
          <i :class="'more-bot'" @click="()=>flag=!flag"></i>
          <!--<transition-group name="fade" tag="div">-->
          <div class="dropList" v-if="flag" key="1">
            <div class="list-title">
              <span class="status">选择状态</span>
              <i :class="'more-top'" @click="()=>flag=!flag"></i>
            </div>
            <div class="statusIndex">
              <span v-for="(item,index) in TabList" :key="index" @click="checkStatus(index)" :class="{'checkBgc':index == checkClr}">{{item.sortname}}</span>
            </div>
          </div>
          <!--</transition-group>-->
          <!--<transition-group name="fade" tag="div">-->
          <div class='popContainer' v-if="flag" key="2" @click="()=>flag=false"></div>
          <!--</transition-group>-->
        </div>
      </div>
      <mt-loadmore :top-method="loadTop" ref="loadmore">
        <div class="orderGoods">
          <div class="orderIndex" v-for="(item,index) in orderList" :key="index">
            <div class="c-title">{{item.supplierWarehouse}}
              <span style="color:#F60;float:right;">{{item.orderStatus|orderStatus}}</span>
            </div>
            <router-link :to="{ path: 'orderDetails', query: { orderId: item.orderId }}">
              <div class="c-order" v-for="(item,index) in item.orderGoodsList" :key="index">
                <div class="order-mid">
                  <p>{{item.sellingPoints}}</p>
                  <span>货号：{{item.goodsCode}}</span><br>
                  <span v-if="!item.sizeAlias">尺码：{{item.goodsSpec}}</span>
                  <span v-if="item.sizeAlias">尺码：{{item.goodsSpec}}({{item.sizeAlias}})</span>
                </div>
                <img :src="item.goodsImg" alt="" class="pic">
                <div class="order-right">
                  <p>￥{{item.goodsMoney|formatMoney}}</p>
                  <span class="count">￥{{item.goodsPrice|formatMoney}}</span><br>
                  <span>x{{item.goodsNum}}</span>
                  <router-link :to="{ path: 'refundDetails', query: { returnId: item.returnId }}" v-if="item.returnStatus">{{item.returnStatus|returnStatus}}</router-link>
                </div>
              </div>
            </router-link>
            <p class="orderPrice">共{{item.orderGoodsNum}}件商品 合计：￥{{item.orderPayPrice|formatMoney}}（含运费：{{item.orderFreight|formatMoney}}）</p>
            <div class="btn-box">
              <button v-if="item.orderStatus == 1" @click="close(item.orderId)">撤销订单</button>
              <router-link :to="{ path: 'refundApply', query: { orderId: item.orderId }}" v-if="item.orderStatus == 2||item.orderStatus == 3||item.orderStatus == 4">申请售后</router-link>
              <button v-if="item.orderStatus == 3||item.orderStatus == 4" @click="post(item.express, item.expressNumber)">查看物流</button>
              <button class="orange payBtn" v-if="item.orderStatus == 1">付款</button>
              <button class="orange confirm" v-if="item.orderStatus == 3" @click="confirm(item.orderId)">确认收货</button>
              <button v-if="item.orderStatus == 4||item.orderStatus == 5" @click="deleteOrder(item.orderId)">删除订单</button>
            </div>
          </div>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import {
  getOrderInfo,
  closeOrder,
  deleteCloseOrder,
  confirmOrder
} from '@/api/shop'
import { MessageBox } from 'mint-ui'
import {
  mapGetters
} from 'vuex'
export default {
  data() {
    return {
      flag: false,
      orderStatus: '',
      orderList: [],
      checkClr: 0,
      TabList: [
        { sortname: '全部' },
        { sortname: '待付款' },
        { sortname: '待发货' },
        { sortname: '待收货' },
        { sortname: '交易成功' },
        { sortname: '交易关闭' },
        { sortname: '退货退款' }
      ]
    }
  },
  watch: {},
  components: {
  },
  created() {
    this.bScroll()
    this.fetchData()
  },
  filters: {
    orderStatus(val) {
      return val === 0 ? '' : val === 1 ? '待付款' : val === 2 ? '待发货' : val === 3 ? '待收货' : val === 4 ? '已完成' : val === 5 ? '已撤销' : '未知'
    },
    returnStatus(val) {
      return val === 0 ? '' : val === 1 ? '待审核' : val === 2 ? '等待寄回' : val === 3 ? '已寄回' : val === 4 ? '已确认' : val === 5 ? '已拒绝' : val === 6 ? '已撤销' : val === 7 ? '待退款' : val === 8 ? '退款成功' : '未知'
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  methods: {
    loadTop() {
      // 下拉刷新
      this.$refs.loadmore.onTopLoaded()
      this.orderList = []
      this.fetchData()
    },
    bScroll() {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.tab, {
            startX: 0,
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh()
        }
      })
    },
    fetchData() {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      // 获取订单信息
      const formData = {
        userId: this.userInfo.id,
        orderStatus: this.orderStatus,
        pageIndex: 1,
        pageSize: 100
      }
      getOrderInfo(formData).then(res => {
        this.orderList = this.orderList.concat(res.data.orderList)
      })
    },
    checkStatus(index, event) {
      this.checkClr = index
      this.orderStatus = index
      this.flag = false
      this.orderList = []
      this.fetchData()
      // const aaa = this.$refs.tabitem.getElementsByClassName('tab_item')
      this.scroll.scrollToElement(this.$refs.tabitem[index], 300, -190)
    },
    close(orderId) {
      MessageBox.confirm('确定撤销该订单?').then(action => {
        closeOrder({ orderId: orderId }).then(res => {
          // Toast('订单已撤销')
          this.orderList = []
          this.fetchData()
        })
      })
    },
    deleteOrder(orderId) {
      MessageBox.confirm('确定删除订单?').then(action => {
        deleteCloseOrder({ orderId: orderId }).then(res => {
          // Toast('订单已删除')
          this.orderList = []
          this.fetchData()
        })
      })
    },
    post(express, expressNumber) {
      window.location.href = 'https://m.kuaidi100.com/index_all.html?type=' + express + '&postid=' + expressNumber
    },
    confirm(orderId) {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      // 确认收货
      const formData = {
        userId: this.userInfo.id,
        orderId: orderId
      }
      MessageBox.confirm('确认收货?').then(action => {
        confirmOrder(formData).then(res => {
          // Toast('订单已删除')
          this.orderList = []
          this.fetchData()
        })
      })
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';
.orderList {
  min-height: 100vh; // margin-top: 45px;
  .topNav {
    width: 10rem;
    position: fixed;
    z-index: 2;
    top: 0;
    header {
      height: 45px;
      background-color: #FFF;
      color: #000;
      border-bottom: 1px solid #ECECEC;
    }
    .orderStatus {
      background-color: #fff;
      border-bottom: 1px solid #ECECEC;
      overflow: hidden; // position: fixed;
      position: relative;
      .tab {
        width: 100%;
        overflow: hidden;
      }
      .tab_content {
        min-width: 530px;
        float: left;
      }
      .tab_item.check {
        border-bottom: 2px solid #F60;
        color: #F60;
      }

      .tab_item {
        display: inline-block;
        font-size: 12px;
        padding: 0 1.3em;
        height: 40px;
        line-height: 40px;
        text-align: center;
        position: relative;
      }
      .more-bot {
        right: 0;
        top: 0;
        height: 40px;
        width: 35px;
        position: absolute;
        z-index: 1;
        background: #fff;
      }
      .more-bot::after {
        border: solid 2px #c8c8cd;
        border-bottom-width: 0;
        border-left-width: 0;
        content: " ";
        top: 50%;
        right: 15px;
        position: absolute;
        width: 5px;
        height: 5px;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(135deg);
      }
      .dropList {
        height: 192px;
        width: 100%;
        background-color: #fff;
        position: fixed;
        z-index: 2;
        top: 45px;
        .list-title {
          background-color: #fff;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          color: inherit;
          min-height: 48px;
          display: block;
          overflow: hidden;
          position: relative;
          text-decoration: none;
          padding-left: 10px;
          .status {
            font-size: 16px;
            line-height: 48px;
            color: #989898;
          }
          .more-top::after {
            border: solid 2px #c8c8cd;
            border-bottom-width: 0;
            border-left-width: 0;
            content: " ";
            top: 50%;
            right: 20px;
            position: absolute;
            width: 5px;
            height: 5px;
            -webkit-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(-45deg);
          }
        }
        .statusIndex {
          padding: 0 3.5%;
          overflow: hidden;
          span {
            width: 31%;
            height: 35px;
            display: inline-block; // color: #FFF;
            // background-color: #F60;
            border: 1px solid #ECECEC;
            text-align: center;
            line-height: 35px;
            float: left;
            margin-right: 3.5%;
            margin-bottom: 10px;
          }
          .checkBgc {
            background-color: #F60;
            color: #FFF;
          }
          span:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
      .popContainer {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
      }
    }
  }
  .orderGoods {
    padding-top: 85px;
    padding-bottom: 40px;
    .orderIndex {
      background-color: #fff;
      margin-top: 10px;
      border-top: 1px solid #D4DCE1;
      border-bottom: 1px solid #D4DCE1;
      .c-title {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
      }
      .c-order {
        padding: 10px 100px;
        background-color: rgb(252, 252, 252);
        overflow: hidden;
        margin-bottom: 3px;
        color: #000;
        .pic {
          position: relative;
          float: left;
          width: 70px;
          height: 85px;
          margin-left: -100%;
          left: -90px;
        }
        .order-mid {
          position: relative;
          float: left;
          width: 100%;
          height: 100%; //   line-height: 25px;
          p {
            line-height: 15px;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          span {
            color: rgb(190, 190, 190);
            margin-top: 10px;
            display: inline-block;
          }
        }
        .order-right {
          text-align: right;
          position: relative;
          vertical-align: top;
          float: right;
          width: 65px;
          height: 100%;
          margin-left: -190px;
          right: -90px;
          line-height: 25px;
          span {
            color: rgb(190, 190, 190);
            float: right;
          }
          .count {
            text-decoration: line-through;
          }
          a {
            width: 65px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            display: inline-block;
            border: 1px solid #CECECE;
            background-color: #F0F0F0;
            color: #000;
            border-radius: 2px;
            margin-top: 15px;
          }
        }
      }
      .orderPrice {
        line-height: 50px;
        font-size: 14px;
        text-align: right;
      }
      .btn-box {
        text-align: right;
        height: auto;
        button,
        a {
          width: 65px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          display: inline-block;
          color: #8B8B8B;
          border: 1px solid #CECECE;
          background-color: #fff;
          border-radius: 2px;
          margin-bottom: 15px;
          margin-right: 10px;
        }
        .orange {
          color: #F60;
          border-color: #F60;
        }
      }
    }
  }
}
</style>
